<template>
  <div class="box">
    <div class="top">
      <van-nav-bar
        fixed
        title="再看我就要和你收钱了"
        left-arrow
        @click-left="$store.commit('deitShow', false)"
      />
    </div>
    <header>
      <div
        class="bg"
        v-if="data.coverImgUrl"
        :style="`background:url('${data.coverImgUrl}') 50% 50% no-repeat; background-size: cover; filter:blur(20px)`"
      ></div>
      <div class="logo">
        <div class="im">
          <i>歌单</i>
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
              <path
                fill-rule="evenodd"
                fill="#040000"
                d="M22 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H4v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S2 18.011 2 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 2 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
                opacity=".15"
              />
              <path
                fill-rule="evenodd"
                fill="#fff"
                d="M20 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H2v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S0 18.011 0 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 0 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
              />
            </svg>
            {{ data.playCount }}</span
          >
          <img :src="data.coverImgUrl" alt="" />
        </div>
        <div class="other">
          <h2>{{ data.name }}</h2>
          <div class="tx">
            <img src="../../assets/img/hui.jpeg" alt="" />
            &nbsp;&nbsp;&nbsp;
            <span> 晓辉出品 </span>
          </div>
        </div>
      </div>
    </header>
    <h3>歌曲列表{{ idList.length }}</h3>
    <div class="wrapper">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="onLoad"
      >
        <van-cell
          center
          :title="item.name"
          :label="item.ar[0].name + '-' + item.name"
          v-for="item in list2"
          :key="item.id"
        >
          <template #right-icon>
            <van-icon
              name="add-o"
              size="0.6rem"
              @click="push(item)"
              class="addo"
            />
            <van-icon
              name="play-circle-o"
              size="0.6rem"
              @click="play(item.id, item)"
            />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { pushSong } from '@/utils/index.js'
export default {
  data () {
    return {
      data: {},
      idList: [],
      list3: [],
      list2: [],
      page: 10,
      loading: false,
      finished: false,
    }
  },

  methods: {
    play (a, b) {
      console.log(a);
      this.$store.commit('setId', a)
      this.$store.commit('setPlayNum')
      pushSong(b)
    },
    push (a) {
      let Glist = this.$store.state.List
      if (Glist.every(item => item.al.id != a.al.id)) {
        Glist.push(a)
        Toast.success('添加成功')
      } else {
        Toast.fail('歌曲已存在');
      }
      this.$store.commit('setList', Glist)

    },
    getAxios () {
      return this.axios({
        url: "/playlist/detail?id=" + this.$store.state.dialogId,
      })
    },
    async onLoad () {

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await this.getAxios()
      this.data = res.data.playlist
      this.idList = res.data.playlist.trackIds
      this.list3 = this.idList.slice(this.page, this.page + 10)
      let arr = []
      this.list3.forEach(item => { arr.push(item.id) })
      // console.log(arr);
      let a = arr.join(',')
      this.axios({
        url: '/song/detail?ids=' + a,
      }).then(res => {
        console.log(res);
        let B = res.data
        if (typeof B != 'object') {
          this.finished = true
        }
        // console.log(typeof B)
        this.list2 = [...this.list2, ...res.data.songs]
        this.page = this.page + 10
        this.loading = false
      })

    },
  }
}
</script>

<style lang=less scoped>
.addo {
  margin-right: 20px;
}
.top {
  margin-bottom: 50px;
}
.box {
  @media screen and(max-width: 350px) {
    header {
      height: 156px;
    }
  }
  @media screen and(max-width: 260px) {
    header {
      height: 144px;
    }
  }
  @media screen and(min-width: 350px) {
    header {
      height: 175px;
    }
  }
  header {
    position: relative;
    .bg {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    .logo {
      height: 70%;
      padding: 0 10px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      .im {
        position: relative;
        width: 114px;
        min-width: 95px;
        i {
          background: rgba(217, 48, 48, 0.8);
          border-top-right-radius: 17px;
          border-bottom-right-radius: 17px;
          font-style: normal;
          font-size: 12px;
          color: #fff;
          height: 17px;
          padding: 0 8px;
          text-align: center;
          line-height: 17px;
          position: absolute;
          top: 10px;
        }
        span {
          svg {
            height: 12px;
          }
          position: absolute;
          top: 2px;
          right: 2px;
          color: #fff;
          font-size: 12px;
        }
        img {
          width: 114px;
          height: auto;
        }
      }
      .other {
        overflow: hidden;
        flex: auto;
        margin-left: 20px;
        h2 {
          overflow: hidden;
          color: #fefefe;
          font-size: 17px;
          height: 44px;
        }
        .tx {
          overflow: hidden;
          img {
            height: 30px;
            width: auto;
            border-radius: 50%;
            vertical-align: middle;
          }
          span {
            color: hsla(0, 0%, 100%, 0.7);
            font-size: 14px;
          }
        }
      }
    }
  }
  h3 {
    padding: 0 10px;
    height: 23px;
    color: #666;
    font-size: 12px;
    line-height: 23px;
    background: #eeeff0;
  }
  section {
    position: relative;
    ul {
      .list {
        overflow: hidden;
        height: 55px;
        display: flex;

        .til {
          width: 40px;
          margin-right: 10px;
          line-height: 55px;
          text-align: center;
          color: #999;
        }
        .cot {
          flex: auto;
          display: flex;
          overflow: hidden;
          .left {
            overflow: hidden;
            flex: auto;
            height: 55px;
            .top {
              height: 17px;
              overflow: hidden;
              line-height: 17px;
              font-size: 17px;
              color: rgb(51, 51, 51);
              margin: 7px 0 10px 0;
            }
            .bottom {
              overflow: hidden;
              height: 12px;
              line-height: 12px;
              font-size: 12px;
              color: rgb(136, 136, 136);
              i {
                display: inline-block;
                background: url('../../assets/img/index_icon_2x.png') no-repeat
                  0 0;
                background-size: 166px 97px;
                width: 12px;
                height: 8px;
              }
            }
          }
          .right {
            overflow: hidden;
            width: 22px;
            padding: 0 10px;
            height: 55px;
            margin-right: 10px;
            background: url('../../assets/img/index_icon_2x.png') no-repeat -24px
              20px;
            background-size: 166px 97px;
            // width: 22px;
            // height: 22px;
          }
        }
      }
    }
    .bg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 104px;
      background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 97.3%, 0.7),
        #f8f8f8 60%
      );
      p {
        color: #999;
        font-size: 14px;
        text-align: center;
        margin-top: 60px;
      }
    }
  }
  footer {
    position: relative;
    ul {
      li {
        overflow: hidden;
        height: 77px;
        padding-top: 10px;
        display: flex;
        .toux {
          padding: 0 10px;
          img {
            width: 30px;
            height: auto;
            border-radius: 50%;
            overflow: hidden;
          }
        }
        .txt {
          flex: auto;
          padding-right: 10px;
          .t {
            display: flex;
            height: 38px;
            .r {
              font-size: 12px;
              padding: 10px;
              height: 23px;
              line-height: 30px;
              color: #999;
              img {
                vertical-align: middle;
                width: 23px;
                height: auto;
              }
            }
            .l {
              flex: auto;
              .lt {
                color: #333;
                font-size: 14px;
              }
              .lb {
                color: #999;
                font-size: 12px;
              }
            }
          }
          .b {
            height: 15px;
            line-height: 15px;
            color: #333;
            width: 200px;
            font-size: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .bg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 74px;
      background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 97.3%, 0.7),
        #f8f8f8 60%
      );
      p {
        color: #999;
        font-size: 14px;
        text-align: center;
        margin-top: 30px;
      }
    }
  }
}
</style>